<template>
	<view class="body">
		<xk-header title="物业信息"></xk-header>
		<view class="util-bar">
			<!-- <view class="search-area">
				<view class="search-input">
					<image class="search-icon" src="/static/search.png"></image>
					<input @confirm="searchInfo" v-model="searchText" placeholder="楼栋信息" placeholder-class="placeholder"/>
				</view>
			</view> -->
			<view class="picker-bar">
				<!-- 楼栋 -->
				<picker :range="assetsType" :value="assetsIndex" range-key="property_type_name"
					@change="assetsTypeChange">
					<view class="sort-item-view">
						<view v-if="assetsIndex === ''">物业类型</view>
						<view v-else>{{assetsType[assetsIndex].property_type_name}}</view>
						<image mode="aspectFill" class="xiala" :src="imgUrl+('/wx/xiala.png')"/>
					</view>
				</picker>
				<!-- 楼栋 -->
				<picker :range="buildings" :value="buildIndex" range-key="building"
					@change="buildingChange">
					<view class="sort-item-view">
						<view v-if="buildIndex === ''">楼栋</view>
						<view v-else>{{buildings[buildIndex].building}}</view>
						<image mode="aspectFill" class="xiala" :src="(imgUrl+'/wx/xiala.png')"/>
					</view>
				</picker>
				<!-- 楼层 -->
				<picker :range="storeys" :value="storeyIndex" range-key="storey"
						@change="storeyChange">
					<view class="sort-item-view">
						<view v-if="storeyIndex === ''">楼层</view>
						<view v-else>{{storeys[storeyIndex].storey}}</view>
						<image mode="aspectFill" class="xiala" :src="(imgUrl+'/wx/xiala.png')"/>
					</view>
				</picker>

				<view class="sort-item-view" @click="resetSort()">
					<view>重置</view>
				</view>
			</view>
		</view>
		<!-- @scrolltolower="getData" -->
		<scroll-view refresher-background="#F8F8F8" :refresher-enabled="true" @scrolltolower="getData"   scroll-y >
			<view v-if="assetsList.length > 0" class="data-list" style="padding-top: 20rpx;">
				<!-- <checkbox-group @change="checkboxChange"> -->
				<!-- <view style="height: 100px;"> -->
					<view class="data-item" v-for="(item, index) of assetsList" @click="addBuild(item)" v-if="!selectItemMap[item.property_id]" :key="index">
						<view>
							<view class="item-top">
								<!-- <checkbox :value="item.property_id" :checked="selectIndexList.indexOf(item.property_id) !== -1"/> -->
								<view class="title">物业编号: {{item.property_code || ""}}</view>
							</view>
							<view class="item-middel">
								<image v-if="item.property_image" mode="aspectFill" class="img" :src="item.property_image | formatImgPath('260', '195')"/>
								<image v-else mode="aspectFill" class="img" :src="(imgUrl+'/wx/default_img.jpg')"/>
								<view class="info">
									<view>
										<view class="name">{{item.tag_name || "-"}}</view>
										<view class="desc">总面积{{item.floor_area}}㎡/{{item.building}}/{{item.storey}}</view>
									</view>
									<view>
										<view class="amount">{{(item.pricing_amount * item.floor_area || "") | formatMoneyNo00}}元/月</view>
										<view class="desc">{{(item.pricing_amount * item.floor_area || "") | formatMoneyNo00}}元/㎡</view>
									</view>
								</view>
							</view>
						</view>
						<view class="btn-view" >
							<!-- <view v-if="paid_id!=''" class="common-btn btn-sty2 btn" @click="updateBuild(item)">修改</view>
							<view v-else class="common-btn btn-sty2 btn" @click="addBuild(item)">添加</view> -->
						</view>
					</view>
					<view class="textbox">没有更多了</view>
					<!-- </view> -->
				<!-- </checkbox-group> -->
			</view>
			<view class="empty-view" v-else>
				<image class="empty-icon" :src="(imgUrl+'/wx/empty_data_icon.png')"></image>
				<view>哎呀，该界面暂无内容~</view>
			</view>
			<!-- <view class="common-zw" style="width: 750rpx;"></view> -->
		</scroll-view>
		<!-- <view class="common-bottom-view select-view" style="height: 300rpx;">
			<view class="title">已选中物业</view>
			<view class="select-list">
				<view v-for="(item, index) of selectItem" :key="index" class="select-item">
					<view class="info">{{item.tag_name}}/{{item.building}}/{{item.storey}}</view>
					<image @click="deleteItem(index)" class="del-icon" src="../../static/delete.png"></image>
				</view>
			</view>
			<view class="common-btn2" @click="selectBuilding">确定</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:this.$config.BASE_imgUrl,
				paid_id:"",
				property_type_id: "",
				searchText: '',
				scrollViewHeight: 0,
				startNum: 0,
				isAll: false,
				assetsList: [],
				selectIndexList: [],
				selectItemMap: {},
				selectItem: [],
				selectItem2: [],
				assetsIndex: '',
				assetsType: [],
				buildIndex: '',
				buildings: [],
				storeyIndex: '',
				storeys: [],
				buildings: [{
					building: "楼栋"
				}],
				storeys: [{
					storey: "楼层"
				}],
			}
		},
		onLoad(options){
			console.log("id",options.paid_id)
			this.paid_id=options.paid_id
			console.log("this.paid_id",this.paid_id)
			
			if(options.ids){
				this.selectItem = JSON.parse(options.ids || '[]')
				for(let item of this.selectItem){
					this.selectItemMap[item.property_id] = true;
				}
			}
			this.getFilterInfo()
			this.getData();
		},
		mounted(){
			this.$util.getHeightWithTopEl(".util-bar").then(height => {
				this.scrollViewHeight = height;
			});
		},
		methods: {
			create(item){
				console.log('数据',item)
				uni.navigateTo({
					url:'/pagesA/paid-service/paid-service-create?wuyeinfo='+item
				})
			},
			getFilterInfo(){
				this.$api.assets_getAssetsPropertyType().then((res)=>{
					console.log("getFilterInfo:",res)
					this.assetsType = res
				})
			},
			resetSort(){
				this.assetsIndex = ''
				this.buildIndex = ''
				this.storeyIndex = ''
				this.searchInfo();
			},
			deleteItem(index){
				this.selectItemMap[this.selectItem[index].property_id] = false;
				this.selectItem.splice(index, 1);
			},
			// addBuild(item){
			// 	uni.$emit('getBuildInfo', this.selectItem);
			// 	this.selectItemMap[item.property_id] = true;
			// 	this.selectItem.push({
			// 		tag_name: item.tag_name,
			// 		building: item.building,
			// 		storey: item.storey,
			// 		property_id: item.property_id
			// 	})
			// 	console.log('数据',this.selectItem)
			// 	uni.navigateTo({
			// 		url:'/pagesA/paid-service/paid-service-create?wuyeinfo=' + JSON.stringify(this.selectItem)
			// 	})
			// },
			addBuild(item){
				uni.$emit('getBuildInfo', item);
				uni.navigateBack()
			},
			updateBuild(item){
				console.log('item',item)
				uni.$emit('getBuildInfo', this.selectItem);
				this.selectItemMap[item.property_id] = true;
				this.selectItem.push({
					tag_name: item.tag_name,
					building: item.building,
					storey: item.storey,
					property_code:item.property_code,
					property_id: item.property_id
				})
				console.log('数据',this.selectItem)
				// console.log(it)
				uni.navigateTo({
					url:'/pagesA/paid-service/paid-service-update?wuyeinfo='+JSON.stringify(this.selectItem)+'&paid_id='+this.paid_id
				})
			},
			assetsTypeChange(e){
				console.log("信息：",e)
				this.assetsIndex = e.detail.value
				console.log("看看",this.assetsType[0].property_type_id)
				
				this.$api.assets_getFilter({property_type_id:this.assetsType[this.assetsIndex].property_type_id}).then((res)=>{
					console.log("物业类型：",res)
					this.buildings = res.filter_BuildingRange
					this.storeys = res.filter_StoreyRange
				})
				this.searchInfo()
			},
			buildingChange(e){
				this.buildIndex = e.detail.value
				
				this.searchInfo()
			},
			storeyChange(e){
				this.storeyIndex = e.detail.value
				
				this.searchInfo()
			},
			searchInfo(){
				this.isAll = false;
				this.startNum = 0;
				this.getData()
			},
			selectBuilding(){
				// uni.$emit('getBuildInfo', this.selectIndexList);
				uni.navigateBack()
			},
			getData(){
				if(!this.isAll){
					let params = {
						start: this.startNum,
					}
					if(this.assetsIndex !== ''){
						params.property_type_id = this.assetsType[this.assetsIndex].property_type_id
					}
					if(this.buildIndex !== ''){
						params.building_range = `["${this.buildings[this.buildIndex].building}"]_nostr`
						
					}
					if(this.storeyIndex !== ''){
						params.storey_range = `["${this.storeys[this.storeyIndex].storey}"]_nostr`
						
					}
					this.$api.assets_getAssetsProperty(params).then((res)=>{
						console.log("res",res)
						if(res.length < 20){
							this.isAll = true;
						}
						if(this.startNum == 0){
							this.assetsList = res;
						}else{
							this.assetsList = this.assetsList.concat(res);
						}
						this.startNum += 20;
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
.textbox{
	text-align: center;
	height: 40px;
	font-size: 18px;
	color: #2C72FF;
}
.picker-bar {
	height: 100px;
	display: flex;
	background-color: #FFFFFF;
	justify-content: space-around;
	align-items: center;
	height: 100rpx;
	flex-direction: row;
	font-size: 28rpx;
	font-weight: bold;
	.sort-item-view {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		.xiala {
			width: 21rpx;
			height: 13rpx;
			margin-left: 10rpx;
		}
	}
	.scan-view {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: flex-end;
		.scan {
			width: 50rpx;
			height: 50rpx;
			margin-right: 30rpx;
		}
	}
}
.common-bottom-view{
	display: flex;
	flex-direction: column;
	padding: 10rpx 30rpx 30rpx 30rpx;
	box-sizing: border-box;
	// .common-btn{
	// 	margin: 10rpx 30rpx;
	// 	height: 20px;
	// }
}
.common-btn2{
	margin: 10px;
	border-radius:15px;
	background-color: #2C72FF;
	width: 90%;
	text-align: center;
	font-size: 18px;
	height: 30px;
}
.select-view{
	.title{
		font-size: 24rpx;
		color: #999999;
	}
}
.select-list{
	z-index: 999;
	display: flex;
	overflow-y: auto;
	flex-wrap: wrap;
	flex: 1;
	.select-item{
		position: relative;
		display: flex;
		align-items: center;
		background-color: #ebebeb;
		color: #333333;
		font-size: 24rpx;
		height: 50rpx;
		padding: 0 70rpx 0 20rpx;
		border-radius: 40rpx;
		margin: 10rpx 10rpx 0 0;
		.del-icon{
			position: absolute;
			width: 50rpx;
			height: 50rpx;
			top: 0;
			right: 0;
		}
	}
}
.search-area{
	background-color: #FFFFFF;
	padding: 20rpx 30rpx;
	.search-input{
		height: 80rpx;
		background: #F8F8F8;
		border-radius: 10rpx;
		display: flex;
		flex: 1;
		align-items: center;
		.search-icon{
			width: 48rpx;
			height: 48rpx;
			margin: 0 20rpx 0 30rpx;
		}
		input{
			height: 80rpx;
			font-size: 28rpx;
			flex: 1;
		}
	}
}
.data-list{
		border-radius: 10rpx;
		height: calc( 100vh - var(--status-bar-height) - 100rpx - 130rpx);
		.data-item {
			display: flex;
			flex-direction: column;
			margin-bottom: 30rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			margin: 20rpx 30rpx 0rpx 30rpx;
			padding: 20rpx;
			color: #333;
			font-size: 28rpx;
			white-space: normal;
			.item-title {
				display: flex;
				align-items: center;
				font-size: 28rpx;

				.title {
					flex: 1;
				}

				.status-other {
					padding: 5rpx 15rpx;
					font-size: 24rpx;
					color: #2C72FF ;
					background-color: rgba($color: #A5C2FF, $alpha: 0.16);
					border-radius: 5rpx;
				}

				.status {
					color: #FF6400;
					background-color: rgba($color: #FFCDA5, $alpha: 0.16);
				}
			}
			.item-top {
				display: flex;
				align-items: center;
				margin-top: 30rpx;

				>checkbox {
					margin-right: 5rpx;
				}


				.title {
					flex: 1;
				}
			}

			.item-middel {
				display: flex;
				margin-top: 10rpx;

				.img{
					width: 200rpx;
					height: 150rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}
				.info{
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.name{
						font-size: 28rpx;
						font-weight: 600;
						color: #333333;
					}
					.desc{
						font-size: 24rpx;
						color: #999999;
						font-weight: 400;
					}
					.amount{
						font-size: 36rpx;
						color: #FF3737;
						font-weight: 700;
						text{
							font-size: 24rpx;
							color: #FF3737;
							font-weight: 600;
						}
					}
				}
			}
			.location-view {
				display: flex;
				margin-top: 30rpx;
				padding-top: 20rpx;
				align-items: flex-start;
				font-size: 24rpx;
				border-top: 1rpx #eee solid;

				.dingwei {
					width: 30rpx;
					height: 30rpx;
					margin-top: 5rpx;
				}
				.address {
					color: #333;
					margin-left: 10rpx;
				}
				.date1 {
					color: #999;
					margin: 10rpx 0rpx;
				}
				.date2 {
					color: #2C72FF;
				}
			}

			.data-sub-item {
				margin-top: 20rpx;
				padding: 20rpx;
				background-color: #F8F8F8;
			}
			.date-view {
				font-size: 28rpx;
				margin-top: 30rpx;
				margin-bottom: 30rpx;
				:first-child {
					color: #999;
				}
				:last-child {
					color: #2C72FF;
					margin-top: 20rpx;
				}
			}
			.btn-view {
				display: flex;
				align-items: flex-end;
				justify-content:flex-end;
				.btn {
					font-size: 28rpx;
					width: 175rpx;
					height: 60rpx;
					margin: 0;
				}
				.btnNoBg {
					background-color: #FFFFFF;
					border: 1rpx #999999 solid;
					margin-right: 20rpx;
				}

			}
		}
	}
</style>
